<!--
 * Copyright © 2025 上海火金网络科技有限公司. All rights reserved.
 * Payment App Config Management - 支付应用配置管理
 *
 * 功能：管理支付应用配置、产品渠道映射、商户服务商关联
 * 版本：1.0.0
 *
 * Website: https://www.anypay.com
-->

<template>
  <div class="anypay-apple-list-page">
    <div class="anypay-apple-page-header">
      <h1>支付应用配置管理</h1>
      <p>管理支付应用配置、产品渠道映射、商户服务商关联</p>
    </div>

    <!-- 搜索区域 -->
    <div class="anypay-apple-card anypay-apple-mb-6">
      <a-card>
        <div class="search-container standard">
          <!-- 应用名称 -->
          <div class="search-field">
            <label class="search-label">应用名称:</label>
            <a-input
              v-model:value="searchForm.appName"
              placeholder="请输入应用名称"
              class="search-input"
              allow-clear
            />
          </div>

          <!-- 应用ID -->
          <div class="search-field">
            <label class="search-label">应用ID:</label>
            <a-input
              v-model:value="searchForm.appId"
              placeholder="请输入应用ID"
              class="search-input-small"
              allow-clear
            />
          </div>

          <!-- 所属商户 -->
          <div class="search-field">
            <label class="search-label">所属商户:</label>
            <a-select
              v-model:value="searchForm.merchantId"
              placeholder="请选择商户"
              class="search-select-large"
              allow-clear
              show-search
              :filter-option="filterMerchantOption"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option
                v-for="merchant in merchantList"
                :key="merchant.merchantId"
                :value="merchant.merchantId"
              >
                {{ merchant.merchantName }}
              </a-select-option>
            </a-select>
          </div>

          <!-- 应用类型 -->
          <div class="search-field">
            <label class="search-label">应用类型:</label>
            <a-select
              v-model:value="searchForm.appType"
              placeholder="请选择应用类型"
              class="search-select"
              allow-clear
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="CASHIER">收银台</a-select-option>
              <a-select-option value="MOBILE">移动支付</a-select-option>
              <a-select-option value="WEB">网页支付</a-select-option>
            </a-select>
          </div>

          <!-- 连接模式 -->
          <div class="search-field">
            <label class="search-label">连接模式:</label>
            <a-select
              v-model:value="searchForm.connectMode"
              placeholder="请选择连接模式"
              class="search-select"
              allow-clear
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="DIRECT">直连</a-select-option>
              <a-select-option value="INDIRECT">间连</a-select-option>
            </a-select>
          </div>

          <!-- 状态 -->
          <div class="search-field">
            <label class="search-label">状态:</label>
            <a-select
              v-model:value="searchForm.status"
              placeholder="请选择状态"
              class="search-select"
              allow-clear
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">禁用</a-select-option>
            </a-select>
          </div>

          <!-- 操作按钮 -->
          <div class="search-actions">
            <a-button type="primary" @click="handleSearch" class="search-btn">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button @click="handleReset" class="search-btn">
              <template #icon><ReloadOutlined /></template>
              重置
            </a-button>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 数据表格区域 -->
    <div class="anypay-apple-card">
      <a-card>
        <div class="anypay-apple-table anypay-apple-toolbar">
          <AnyTable
            ref="appConfigTable"
            :autoLoad="true"
            :dataLoader="loadAppConfigData"
            :tableColumns="tableColumns"
            :searchParams="searchParams"
            :tableScroll="{ x: 'max-content' }"
            tableRowKey="appId"
            @loadComplete="handleLoadComplete"
          >
            <template #tableToolbar>
              <a-space :size="12">
                <a-button type="primary" @click="handleCreate">
                  <PlusOutlined /> 新增应用配置
                </a-button>
              </a-space>
            </template>
            <template #tableCell="{ column, record }">
              <template v-if="column.key === 'merchantInfo'">
                <div class="merchant-info">
                  <div class="merchant-name">{{ getMerchantName(record.merchantId) }}</div>
                  <div class="merchant-id">{{ record.merchantId }}</div>
                </div>
              </template>
              <template v-else-if="column.key === 'providerInfo'">
                <div class="provider-info">
                  <a-tag color="blue" v-if="getProviderId(record.merchantId)">{{ getProviderName(record.merchantId) }}</a-tag>
                  <div class="provider-id" v-if="getProviderId(record.merchantId)">{{ getProviderId(record.merchantId) }}</div>
                  <div v-else class="text-muted">未配置服务商</div>
                </div>
              </template>

              <template v-else-if="column.key === 'connectMode'">
                <a-tag :color="getConnectModeColor(record.connectMode)">
                  {{ getConnectModeName(record.connectMode) }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'status'">
                <a-tag
                  :color="record.status === 0 ? undefined : (record.status === 1 ? 'green' : 'default')"
                  :class="record.status === 0 ? 'status-disabled' : ''"
                >
                  {{ record.status === 1 ? '启用' : '禁用' }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'op'">
                <div class="anypay-apple-actions">
                  <a-space>
                    <a-button type="link" @click="handleEdit(record)">
                      <EditOutlined />编辑
                    </a-button>
                    <a-button type="link" @click="handleViewProducts(record)">
                      <AppstoreOutlined />产品配置
                    </a-button>
                    <a-button type="link" @click="handleViewChannels(record)">
                      <ApiOutlined />渠道配置
                    </a-button>
                    <a-dropdown placement="bottomRight">
                      <a-button type="link" size="small">
                        <MoreOutlined />
                        更多
                      </a-button>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item key="devices" @click="handleViewDevices(record)">
                            <QrcodeOutlined />
                            设备管理
                          </a-menu-item>
                          <a-menu-item key="toggle" @click="handleToggleStatus(record)">
                            <SwapOutlined />
                            {{ record.status === 1 ? '禁用' : '启用' }}
                          </a-menu-item>
                          <a-menu-divider />
                          <a-menu-item key="delete" @click="handleDelete(record)" style="color: #ff4d4f;">
                            <DeleteOutlined />
                            删除
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </a-space>
                </div>
              </template>
            </template>
          </AnyTable>
        </div>
      </a-card>
    </div>

    <!-- 新增/编辑配置对话框 -->
    <a-modal
      v-model:open="showConfigDialog"
      :title="configDialogTitle"
      width="800px"
      @ok="handleSaveConfig"
      @cancel="handleCancelConfig"
    >
      <a-form
        :model="configForm"
        :rules="configRules"
        ref="configFormRef"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="应用名称" name="appName">
              <a-input v-model:value="configForm.appName" placeholder="请输入应用名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="应用类型" name="appType">
              <a-select v-model:value="configForm.appType" placeholder="请选择应用类型">
                <a-select-option value="CASHIER">收银台</a-select-option>
                <a-select-option value="MOBILE">移动支付</a-select-option>
                <a-select-option value="WEB">网页支付</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="连接模式" name="connectMode">
              <a-select v-model:value="configForm.connectMode" placeholder="请选择连接模式">
                <a-select-option value="DIRECT">直连</a-select-option>
                <a-select-option value="INDIRECT">间连</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="状态" name="status">
              <a-select v-model:value="configForm.status" placeholder="请选择状态">
                <a-select-option :value="1">启用</a-select-option>
                <a-select-option :value="0">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="所属商户" name="merchantId">
          <a-select
            v-model:value="configForm.merchantId"
            placeholder="请选择商户"
            show-search
            :filter-option="filterMerchantOption"
            @change="handleMerchantChange"
          >
            <a-select-option
              v-for="merchant in merchantList"
              :key="merchant.merchantId"
              :value="merchant.merchantId"
            >
              {{ merchant.merchantName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="应用描述" name="appDescription">
          <a-textarea v-model:value="configForm.appDescription" placeholder="请输入应用描述" :rows="3" />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="回调地址" name="callbackUrl">
              <a-input v-model:value="configForm.callbackUrl" placeholder="请输入回调地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="通知地址" name="notifyUrl">
              <a-input v-model:value="configForm.notifyUrl" placeholder="请输入通知地址" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

    <!-- 产品配置对话框 -->
    <a-modal
      v-model:open="showProductDialog"
      title="产品配置管理"
      width="1000px"
      @ok="handleSaveProducts"
      @cancel="handleCancelProducts"
    >
      <div class="product-config-section">
        <a-tabs v-model:activeKey="productActiveTab" type="card">
          <a-tab-pane key="products" tab="支付产品">
            <a-table
              :columns="productColumns"
              :data-source="productList"
              :pagination="false"
              row-key="productCode"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'enabled'">
                  <a-switch
                    v-model:checked="record.enabled"
                    @change="handleProductToggle(record)"
                  />
                </template>
                <template v-else-if="column.key === 'limits'">
                  <div>
                    <div>最小: ¥{{ record.minAmount }}</div>
                    <div>最大: ¥{{ record.maxAmount }}</div>
                  </div>
                </template>
                <template v-else-if="column.key === 'channels'">
                  <a-button
                    type="link"
                    @click="handleConfigChannels(record)"
                    :disabled="!record.enabled"
                  >
                    配置渠道 ({{ record.channelMappings?.length || 0 }})
                  </a-button>
                </template>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="channels" tab="可用渠道">
            <a-table
              :columns="channelColumns"
              :data-source="availableChannels"
              :pagination="false"
              row-key="channelId"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'connectMode'">
                  <a-tag v-for="mode in record.supportedModes" :key="mode" :color="mode === 'DIRECT' ? 'blue' : 'green'">
                    {{ mode === 'DIRECT' ? '直连模式' : '服务商模式' }}
                  </a-tag>
                </template>
                <template v-else-if="column.key === 'status'">
                  <a-tag :color="record.configStatus === 'ACTIVE' ? 'success' : 'error'">
                    {{ record.configStatus === 'ACTIVE' ? '可用' : '不可用' }}
                  </a-tag>
                </template>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>

    <!-- 应用渠道配置模态框 - 参考ChannelConfig.vue -->
    <AppChannelConfigModal
      v-model:visible="showChannelDialog"
      :app-info="currentRecord ? {
        appId: currentRecord.appId,
        appName: currentRecord.appName,
        merchantId: currentRecord.merchantId,
        connectMode: currentRecord.connectMode
      } : undefined"
      @success="searchAppConfigs"
    />

    <!-- 设备管理对话框 -->
    <a-modal
      v-model:open="showDeviceDialog"
      title="设备码牌管理"
      width="1000px"
      @ok="handleSaveDevices"
      @cancel="handleCancelDevices"
    >
      <div class="device-section">
        <div class="device-toolbar">
          <a-button type="primary" @click="handleAddDevice">
            <template #icon>
              <PlusOutlined />
            </template>
            新增设备
          </a-button>
        </div>
        <a-table
          :columns="deviceColumns"
          :data-source="deviceList"
          :pagination="false"
          row-key="deviceId"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === 'ACTIVE' ? 'success' : 'error'">
                {{ record.status === 'ACTIVE' ? '启用' : '禁用' }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'qrCode'">
              <a-button type="link" @click="handleViewQRCode(record)">查看二维码</a-button>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button type="link" @click="handleEditDevice(record)">编辑</a-button>
                <a-button type="link" @click="handleDeleteDevice(record)" danger>删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>

    <!-- 编辑页面组件 -->
    <AppConfigEdit ref="appConfigEditRef" :callbackFunc="searchAppConfigs" />

    <!-- 应用产品配置模态框 -->
    <AppProductConfigModal
      v-model:visible="showProductConfigModal"
      :app-info="currentAppInfo"
      @success="searchAppConfigs"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, getCurrentInstance } from 'vue'
import { message } from 'ant-design-vue'
import {
  PlusOutlined,
  SearchOutlined,
  ReloadOutlined,
  EditOutlined,
  DeleteOutlined,
  SwapOutlined,
  MoreOutlined,
  AppstoreOutlined,
  ApiOutlined,
  QrcodeOutlined
} from '@ant-design/icons-vue'
import { merchants, type Merchant } from '@/mock/merchants'
import { serviceProviders } from '@/mock/service-providers'
import {
  mockLoadAppConfigs,
  mockLoadProductConfig,
  mockLoadDeviceList,
  mockLoadMerchantRelatedData,
  getConnectModeName,
  getConnectModeColor,
  type AppConfig
} from '@/mock/appconfigs'
import AnyTable from '@/components/AnyTable.vue'
import AppConfigEdit from './components/AppConfigEditModal.vue'
import AppChannelConfigModal from './components/AppChannelConfigModal.vue'
import AppProductConfigModal from './components/AppProductConfigModal.vue'

// 获取全局消息提示
const { $AnyMessageBox } = getCurrentInstance()!.appContext.config.globalProperties

// 组件引用
const appConfigTable = ref()
const configFormRef = ref()
const appConfigEditRef = ref()

// 响应式数据
const merchantList = ref<Merchant[]>(merchants)
const availableChannels = ref<any[]>([])
const productList = ref<any[]>([])
const deviceList = ref<any[]>([])

// 对话框状态
const showConfigDialog = ref(false)
const showProductDialog = ref(false)
const showChannelDialog = ref(false)
const showDeviceDialog = ref(false)
const showProductConfigModal = ref(false)

// 搜索表单
const searchForm = reactive({
  appName: '',
  appId: '',
  merchantId: '',
  appType: '',
  connectMode: '',
  status: ''
})

// 搜索参数
const searchParams = reactive<{
  appName?: string
  appId?: string
  merchantId?: string
  appType?: string
  connectMode?: string
  status?: number
}>({})

// 表单数据
const configForm = reactive({
  appId: '',
  appName: '',
  appType: '',
  merchantId: '',
  connectMode: 'DIRECT',
  appDescription: '',
  callbackUrl: '',
  notifyUrl: '',
  status: 1
})

const currentRecord = ref<AppConfig | null>(null)
const productActiveTab = ref('products')

// 当前应用信息（用于产品配置模态框）
const currentAppInfo = ref<{
  appId: string
  appName: string
  merchantId: string
  connectMode: string
} | undefined>(undefined)

// 表格列定义
const tableColumns = [
  {
    title: '应用名称',
    dataIndex: 'appName',
    key: 'appName',
    width: 150,
    fixed: 'left'
  },
  {
    title: '应用ID',
    dataIndex: 'appId',
    key: 'appId',
    width: 120
  },
  {
    title: '商户信息',
    key: 'merchantInfo',
    width: 150
  },
  {
    title: '服务商信息',
    key: 'providerInfo',
    width: 150
  },
  {
    title: '连接模式',
    key: 'connectMode',
    width: 100,
    align: 'center'
  },
  {
    title: '状态',
    key: 'status',
    width: 80,
    align: 'center'
  },
  {
    title: '操作',
    key: 'op',
    width: 280,
    align: 'center',
    fixed: 'right'
  }
]

const productColumns = [
  {
    title: '产品名称',
    dataIndex: 'productName',
    key: 'productName'
  },
  {
    title: '产品代码',
    dataIndex: 'productCode',
    key: 'productCode'
  },
  {
    title: '启用状态',
    key: 'enabled',
    align: 'center'
  },
  {
    title: '金额限制',
    key: 'limits',
    align: 'center'
  },
  {
    title: '渠道配置',
    key: 'channels',
    align: 'center'
  }
]

const channelColumns = [
  {
    title: '渠道名称',
    dataIndex: 'channelName',
    key: 'channelName'
  },
  {
    title: '渠道代码',
    dataIndex: 'channelCode',
    key: 'channelCode'
  },
  {
    title: '支持模式',
    key: 'connectMode'
  },
  {
    title: '配置状态',
    key: 'status'
  }
]



const deviceColumns = [
  {
    title: '设备ID',
    dataIndex: 'deviceId',
    key: 'deviceId'
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    key: 'deviceName'
  },
  {
    title: '设备位置',
    dataIndex: 'location',
    key: 'location'
  },
  {
    title: '状态',
    key: 'status',
    align: 'center'
  },
  {
    title: '二维码',
    key: 'qrCode',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    align: 'center'
  }
]

// 表单验证规则
const configRules = {
  appName: [
    { required: true, message: '请输入应用名称', trigger: 'blur' }
  ],
  merchantId: [
    { required: true, message: '请选择商户', trigger: 'change' }
  ],
  appType: [
    { required: true, message: '请选择应用类型', trigger: 'change' }
  ]
}

// 计算属性
const configDialogTitle = computed(() => {
  return configForm.appId ? '编辑支付应用配置' : '新增支付应用配置'
})

// 生成应用ID
const generateAppId = (): string => {
  return 'APP' + Date.now().toString()
}

// 获取商户名称
const getMerchantName = (merchantId: string): string => {
  const merchant = merchantList.value.find(m => m.merchantId === merchantId)
  return merchant ? merchant.merchantName : merchantId
}

// 获取服务商名称（通过商户获取）
const getProviderName = (merchantId: string): string => {
  const merchant = merchantList.value.find(m => m.merchantId === merchantId)
  if (!merchant?.providerId) {
    return ''
  }
  const provider = serviceProviders.find(p => p.providerId === merchant.providerId)
  return provider ? provider.providerName : merchant.providerId
}

// 获取服务商ID（通过商户获取）
const getProviderId = (merchantId: string): string => {
  const merchant = merchantList.value.find(m => m.merchantId === merchantId)
  return merchant?.providerId || ''
}


// 数据加载函数
const loadAppConfigData = async (params: any) => {
  try {
    const response = await mockLoadAppConfigs(params)
    return {
      records: response.data || [],
      total: response.total || 0
    }
  } catch (error) {
    console.error('Failed to load app config data:', error)
    return { records: [], total: 0 }
  }
}

// 加载完成回调
const handleLoadComplete = () => {
  console.log('App config data loaded successfully')
}

// 搜索功能
const handleSearch = () => {
  // 清空之前的搜索参数
  Object.keys(searchParams).forEach(key => {
    delete (searchParams as any)[key]
  })

  // 只添加非空的搜索条件
  if (searchForm.appName) {
    searchParams.appName = searchForm.appName
  }
  if (searchForm.appId) {
    searchParams.appId = searchForm.appId
  }
  if (searchForm.merchantId) {
    searchParams.merchantId = searchForm.merchantId
  }
  if (searchForm.appType) {
    searchParams.appType = searchForm.appType
  }
  if (searchForm.connectMode) {
    searchParams.connectMode = searchForm.connectMode
  }
  if (searchForm.status !== '') {
    searchParams.status = Number(searchForm.status)
  }

  searchAppConfigs()
}

// 重置搜索
const handleReset = () => {
  // 清空搜索表单
  Object.keys(searchForm).forEach(key => {
    (searchForm as any)[key] = ''
  })

  // 清空搜索参数
  Object.keys(searchParams).forEach(key => {
    delete (searchParams as any)[key]
  })

  searchAppConfigs()
}

// 搜索和重置
const searchAppConfigs = () => {
  appConfigTable.value?.refreshTable(true)
}

// 过滤商户选项
const filterMerchantOption = (input: string, option: any) => {
  return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

// 方法
const handleCreate = () => {
  appConfigEditRef.value?.show(null)
}

const handleEdit = (record: AppConfig) => {
  appConfigEditRef.value?.show(record)
}

const handleDelete = (record: AppConfig) => {
  $AnyMessageBox.confirmDanger('确认删除该支付应用配置？', '删除后无法恢复，请谨慎操作', () => {
    // 这里应该调用真实的删除API
    message.success('删除成功')
    searchAppConfigs()
  })
}

const handleToggleStatus = (record: AppConfig) => {
  const newStatus = record.status === 1 ? 0 : 1
  const action = newStatus === 1 ? '启用' : '禁用'

  $AnyMessageBox.confirm(
    `确认${action}该支付应用配置？`,
    `${action}后App状态将立即生效`,
    () => {
      // 这里应该调用真实的状态切换API
      record.status = newStatus
      message.success(`${action}成功`)
    }
  )
}

const handleViewProducts = (record: AppConfig) => {
  // 设置当前应用信息
  currentAppInfo.value = {
    appId: record.appId,
    appName: record.appName,
    merchantId: record.merchantId,
    connectMode: record.connectMode
  }

  // 显示新的产品配置模态框
  showProductConfigModal.value = true
}

const handleViewChannels = (record: AppConfig) => {
  currentRecord.value = record
  showChannelDialog.value = true
}

const handleViewDevices = (record: AppConfig) => {
  currentRecord.value = record
  loadDeviceList(record.appId)
  showDeviceDialog.value = true
}

const handleSaveConfig = async () => {
  try {
    // 验证表单
    await configFormRef.value?.validate()

    // 如果是新增，生成应用ID
    if (!configForm.appId) {
      configForm.appId = generateAppId()
    }

    // 保存配置
    message.success('保存成功')
    showConfigDialog.value = false
    searchAppConfigs()
  } catch (error) {
    console.error('Save failed:', error)
  }
}

const handleCancelConfig = () => {
  showConfigDialog.value = false
  resetConfigForm()
}

const handleSaveProducts = () => {
  message.success('产品配置保存成功')
  showProductDialog.value = false
}

const handleCancelProducts = () => {
  showProductDialog.value = false
}


const handleSaveDevices = () => {
  message.success('设备配置保存成功')
  showDeviceDialog.value = false
}

const handleCancelDevices = () => {
  showDeviceDialog.value = false
}

const handleMerchantChange = (merchantId: string) => {
  // 商户变更时，重新加载相关数据
  loadMerchantRelatedData(merchantId)
}

const handleProductToggle = (record: any) => {
  // 产品启用/禁用逻辑
  message.success(`产品${record.enabled ? '启用' : '禁用'}成功`)
}

const handleConfigChannels = (record: any) => {
  // 配置产品渠道映射
  message.info('配置产品渠道映射')
}


const handleAddDevice = () => {
  // 新增设备
  message.info('新增设备')
}

const handleEditDevice = (record: any) => {
  // 编辑设备
  message.info('编辑设备')
}

const handleDeleteDevice = (record: any) => {
  // 删除设备
  message.success('删除设备成功')
}

const handleViewQRCode = (record: any) => {
  // 查看二维码
  message.info('查看设备二维码')
}

const resetConfigForm = () => {
  Object.assign(configForm, {
    appId: '',
    appName: '',
    appType: '',
    merchantId: '',
    connectMode: 'DIRECT',
    appDescription: '',
    callbackUrl: '',
    notifyUrl: '',
    status: 1
  })
}

const loadDeviceList = async (appId: string) => {
  try {
    const response = await mockLoadDeviceList(appId)
    deviceList.value = response.data
  } catch (error) {
    message.error('加载设备列表失败')
  }
}

const loadMerchantRelatedData = async (merchantId: string) => {
  try {
    // 加载商户相关的服务商、渠道等数据
    const response = await mockLoadMerchantRelatedData(merchantId)
    // 更新相关数据
  } catch (error) {
    message.error('加载商户相关数据失败')
  }
}

// 组件挂载时加载数据
onMounted(() => {
  // 数据由AnyTable自动加载
})
</script>

<style scoped>
@import '../common/list-page.css';

.merchant-info .merchant-name {
  font-weight: bold;
  color: #333;
}

.merchant-info .merchant-id {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.provider-info .provider-id {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.text-muted {
  color: #999;
}

.product-config-section,
.channel-config-section {
  max-height: 600px;
  overflow-y: auto;
}

.device-section {
  max-height: 600px;
  overflow-y: auto;
}

.device-toolbar {
  margin-bottom: 16px;
}

.ant-modal .ant-modal-body {
  padding: 20px;
}

.ant-tabs {
  margin-top: 16px;
}
</style>